<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改单位用工管理')" />
    <th:block th:include="include :: datetimepicker-css" />
    <style type="text/css">
        .user-info-head{
            position:relative;display:inline-block;
            width: 100%;
            height: 100%;
        }
        .user-info-head:hover:after
        {
            content:'\f030';
            position:absolute;
            left:0;
            right:0;
            top:0;
            bottom:0;
            color:#eee;
            background:rgba(0,0,0,0.2);
            font-family:FontAwesome;
            font-size:24px;
            font-style:normal;
            -webkit-font-smoothing:antialiased;
            -moz-osx-font-smoothing:grayscale;
            cursor:pointer;line-height:150px;
        }
    </style>
</head>
<style>
    .jltable{
        margin: auto;
    }
    .jltable th,td{
        min-height: 40px;
        min-width: 50px;
        border: 1px solid #eee;
        padding: 10px;
    }
    .avatar-container{
        cursor: pointer;
        width: 150px;
        height: 150px;
        position: relative;
    }
</style>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-yggl-edit" th:object="${lwpqYggl}">
            <input name="id" th:field="*{id}" type="hidden">

            <h4 class="form-header h4">基本信息</h4>
            <table class="jltable">
                <tbody>
                <tr>
                    <td>  <label class="control-label is-required">姓名</label> </td>
                    <td>  <input th:field="*{name}"  name="name" class="form-control" type="text" required> </td>
                    <td style="width: 110px"></td><td></td>
                    <td colspan="2" rowspan="3">
                        <div  class="avatar-container text-center">
                            <input th:field="*{avatar}"  type="hidden" name="avatar">
                            <p class="user-info-head" onclick="avatar()">
                                <img id="avatarImg" style="width: 100%;height: 100%" src="" th:src="*{avatar}"
                                     th:onerror="'this.src=\'' + @{'/img/profile.jpg'} + '\''"/>
                            </p>
                            <p><a href="javascript:avatar()"></a></p>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="height: 50px">   <label class="control-label is-required">身份证</label> </td>
                    <td>  <input th:field="*{sfzh}" name="sfzh" class="form-control" type="text" required maxlength="18"> </td>
                    <td style="width: 110px"></td>
                    <td>照片</td>
                </tr>
                <tr>
                    <td> <label class="control-label">部门</label></td>
                    <td>  <input th:field="*{bm}"  name="bm" class="form-control" type="text"></td>
                    <td style="width: 110px"></td>
                </tr>
                <tr>
                    <td>  <label class="control-label">员工职位</label></td>
                    <td>    <input th:field="*{zw}"  name="zw" class="form-control" type="text"></td>
                    <td style="width: 110px"></td>
                    <td> <label class="control-label">员工分类</label></td>
                    <td>
                        <select   name="fl" class="form-control" th:with="type=${@dict.getType('lwpq_ygfl')}">
                            <option th:field="*{fl}" th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                        </select>
                    </td>
                </tr>
                </tbody>
            </table>

            <h4 style="margin-top: 30px" class="form-header h4">人员信息状态</h4>
            <table class="jltable">
                <tbody>
                <tr>
                    <td>  <label class="control-label">状态</label></td>
                    <td>
                        <select name="zt" class="form-control" th:with="type=${@dict.getType('lwpq_yg_zt')}">
                            <option th:field="*{zt}" th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                        </select>
                    </td>
                    <td> <label class="control-label">派遣单位</label></td>
                    <td>  <input th:field="*{pqdw}" name="pqdw" class="form-control" type="text"></td>
                </tr>
                <tr>
                    <td> <label class="control-label">试用期</label></td>
                    <td> <input th:field="*{syq}" name="syq" class="form-control" type="text"></td>
                    <td>  <label class=" control-label">入职时间</label></td>
                    <td>
                        <div class="input-group date">
                            <input th:value="${#dates.format(lwpqYggl.joinTime, 'yyyy-MM-dd')}" name="joinTime" class="form-control" placeholder="yyyy-MM-dd" type="text">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td> <label class="control-label">转正日期</label></td>
                    <td>
                        <div class="input-group date">
                            <input th:value="${#dates.format(lwpqYggl.zzrq, 'yyyy-MM-dd')}" name="zzrq" class="form-control" placeholder="yyyy-MM-dd" type="text">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        </div>
                    </td>
                    <td> <label class="control-label">离职日期</label></td>
                    <td>
                        <div class="input-group date">
                            <input th:value="${#dates.format(lwpqYggl.lzrq, 'yyyy-MM-dd')}" name="lzrq" class="form-control" placeholder="yyyy-MM-dd" type="text">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>

            <h4 style="margin-top: 30px" class="form-header h4">个人信息</h4>
            <table class="jltable">
                <tbody>
                <tr>
                    <td>  <label class="control-label">性别</label></td>
                    <td>  <select name="sex" class="form-control" th:with="type=${@dict.getType('sys_user_sex')}">
                        <option th:field="*{sex}" th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                    </td>
                    <td style="width: 100px"></td>
                    <td>  <label class="control-label">学历</label></td>
                    <td style="width: 210px">   <select name="xl" class="form-control" th:with="type=${@dict.getType('xueli')}">
                        <option th:field="*{xl}" th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option></select>
                    </td>
                </tr>
                <tr>
                    <td>  <label class=" control-label">籍贯</label> </td>
                    <td> <input th:field="*{jg}" name="jg" class="form-control" type="text"></td>
                    <td style="width: 100px"></td>
                    <td><label class="control-label">婚姻</label></td>
                    <td style="width: 210px">
                        <select name="hy" class="form-control" th:with="type=${@dict.getType('lwpq_hy')}">
                            <option th:field="*{hy}" th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td><label class="control-label">电话号码</label></td>
                    <td>
                        <input th:field="*{phone}" name="phone" class="form-control" type="text">
                    </td>
                    <td style="width: 100px"></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td> <label class="control-label">住址</label></td>
                    <td>  <input th:field="*{address}" name="address" class="form-control" type="text"></td>
                    <td style="width: 100px"></td>
                    <td></td>
                    <td></td>
                </tr>
                </tbody>
            </table>

            <h4 style="margin-top: 30px" class="form-header h4">财务工资卡信息</h4>
            <table class="jltable">
                <tbody>
                <tr>
                    <td> <label class=" control-label">开户行</label></td>
                    <td> <input th:field="*{khh}" name="khh" class="form-control" type="text"></td>
                    <td></td>
                    <td> <label class=" control-label">工资卡号</label></td>
                    <td>  <input th:field="*{bank}" name="bank" class="form-control" type="text"></td>
                </tr>
                <tr>
                    <td> <label class="control-label">合同工资</label></td>
                    <td> <input th:field="*{htgz}" name="htgz" class="form-control" type="text"></td>
                    <td></td>
                    <td> <label class="control-label">基本工资</label></td>
                    <td><input th:field="*{jbgz}" name="jbgz" class="form-control" type="text"></td>
                </tr>
                <tr>
                    <td> <label class="control-label">工资发放方式</label></td>
                    <td>
                        <select name="gzfffs" class="form-control" th:with="type=${@dict.getType('lwpq_gzfffs')}">
                            <option th:field="*{gzfffs}" th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                        </select>
                    </td>
                    <td></td><td></td><td></td>
                </tr>
                </tbody>
            </table>



            <h4 class="form-header h4" style="margin-top: 30px">工作经历信息</h4>
            <div class="row">
                <div class="col-sm-12">
                    <button type="button" class="btn btn-white btn-sm" onclick="addColumn()"><i class="fa fa-plus"> 增加</i></button>
                    <button type="button" class="btn btn-white btn-sm" onclick="sub.delColumn()"><i class="fa fa-minus"> 删除</i></button>
                    <div class="col-sm-12 select-table table-striped">
                        <table id="bootstrap-table"></table>
                    </div>
                </div>
            </div>

            <h4 class="form-header h4" style="margin-top: 30px">教育经历信息</h4>
            <div class="row">
                <div class="col-sm-12">
                    <button type="button" class="btn btn-white btn-sm" onclick="addColumn_1()"><i class="fa fa-plus"> 增加</i></button>
                    <button type="button" class="btn btn-white btn-sm" onclick="sub.delColumn()"><i class="fa fa-minus"> 删除</i></button>
                    <div class="col-sm-12 select-table table-striped">
                        <table id="bootstrap-table-1"></table>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script th:inline="javascript">
        var prefix = ctx + "lwpq/yggl";
        var idDatas = [[${@dict.getType('${column.dictType}')}]];
        var createTimeDatas = [[${@dict.getType('${column.dictType}')}]];
        var createByDatas = [[${@dict.getType('${column.dictType}')}]];
        var updateTimeDatas = [[${@dict.getType('${column.dictType}')}]];
        var updateByDatas = [[${@dict.getType('${column.dictType}')}]];
        $("#form-yggl-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/edit", $('#form-yggl-edit').serialize());
            }
        }

        $("input[name='joinTime']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        $("input[name='zzrq']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        $("input[name='lzrq']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });
        // 工作经历
        $(function() {
            var options = {
                data: [[${lwpqYggl.lwpqGzjlList}]],
                pagination: false,
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                sidePagination: "client",
                columns: [{
                    checkbox: true
                },
                {
                    field: 'index',
                    align: 'center',
                    title: "序号",
                    formatter: function (value, row, index) {
                    	var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
                    	return columnIndex + $.table.serialNumber(index);
                    }
                },
                {
                    field: 'startTime',
                    align: 'center',
                    title: '开始时间',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='date' name='lwpqGzjlList[%s].startTime' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'endTime',
                    align: 'center',
                    title: '结束时间',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='date' name='lwpqGzjlList[%s].endTime' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'zw',
                    align: 'center',
                    title: '职位',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='lwpqGzjlList[%s].zw' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'dw',
                    align: 'center',
                    title: '单位名称',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='lwpqGzjlList[%s].dw' value='%s'>", index, value);
                        return html;
                    }
                }
                ]
            };
            $.table.init(options);
        });
        //教育经历
        $(function() {
            var options = {
                id:"bootstrap-table-1",
                data: [[${lwpqYggl.lwpqJyjlList}]],
                pagination: false,
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                sidePagination: "client",
                columns: [{
                    checkbox: true
                },
                    {
                        field: 'index',
                        align: 'center',
                        title: "序号",
                        formatter: function (value, row, index) {
                            var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
                            return columnIndex + $.table.serialNumber(index);
                        }
                    },
                    {
                        field: 'startTime',
                        align: 'center',
                        title: '开始时间',
                        formatter: function(value, row, index) {
                            var html = $.common.sprintf("<input name='lwpqJyjlList[%s].startTime' value='%s' class='form-control'  type='date'>", index, value);
                            return html;
                        }
                    },
                    {
                        field: 'endTime',
                        align: 'center',
                        title: '结束时间',
                        formatter: function(value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='date' name='lwpqJyjlList[%s].endTime' value='%s'>", index, value);
                            return html;
                        }
                    },
                    {
                        field: 'zy',
                        align: 'center',
                        title: '专业',
                        formatter: function(value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='text' name='lwpqJyjlList[%s].zy' value='%s'>", index, value);
                            return html;
                        }
                    },
                    {
                        field: 'xx',
                        align: 'center',
                        title: '学校名称',
                        formatter: function(value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='text' name='lwpqJyjlList[%s].xx' value='%s'>", index, value);
                            return html;
                        }
                    }
                ]
            };
            $.table.init(options);
        });

        function addColumn() {
            var count = $("#bootstrap-table").bootstrapTable('getData').length;
            sub.editColumn();

            $("#bootstrap-table").bootstrapTable('insertRow', {
                index: count,
                row: {
                    index: $.table.serialNumber(count),
                    startTime: "",

                    endTime: "",

                    zw: "",

                    dw: "",

                    createTime: "",

                    createBy: "",

                    updateTime: "",

                    updateBy: "",

        	    }
            });
        }
        function addColumn_1() {
            var count = $("#bootstrap-table-1").bootstrapTable('getData').length;
            sub.editColumn();

            $("#bootstrap-table-1").bootstrapTable('insertRow', {
                index: count,
                row: {
                    index: $.table.serialNumber(count),
                    startTime: "",

                    endTime: "",

                    zy: "",

                    xx: "",

                    createTime: "",

                    createBy: "",

                    updateTime: "",

                    updateBy: "",

                }
            });
        }

        /*用户管理-头像*/
        function avatar() {
            var url = ctx + 'lwpq/yggl/avatar?url='+$("input[name='avatar']").val();
            top.layer.open({
                type: 2,
                area: [$(window).width() + 'px', $(window).height() + 'px'],
                fix: false,
                //不固定
                maxmin: true,
                shade: 0.3,
                title: "修改头像",
                content: url,
                btn: ['确定', '关闭'],
                // 弹层外区域关闭
                shadeClose: true,
                yes: function(index, layero) {
                    var iframeWin = layero.find('iframe')[0];
                    iframeWin.contentWindow.submitHandler((res)=> {
                        $("input[name='avatar']").val(res);
                        $("#avatarImg").attr("src", res);
                    });
                },
                cancel: function(index) {
                    return true;
                }
            });
        }
    </script>
</body>
</html>